import type Experience from "../Experience";

/**
 * 车辆标题组件
 * 显示 "xiaomi su7" 和副标题
 */
export default class CarTitle {
  base: Experience;
  container: HTMLDivElement;

  constructor(base: Experience) {
    this.base = base;

    // 创建标题容器
    this.container = document.createElement("div");
    this.container.className = "car-title";
    this.container.innerHTML = `
      <h1 class="car-title-main">xiaomi su7</h1>
      <p class="car-title-sub">C级高性能 生态科技轿车</p>
    `;

    // 初始隐藏
    this.container.style.opacity = "0";
    
    // 添加到 DOM
    document.body.appendChild(this.container);
  }

  /**
   * 显示标题（带淡入动画）
   */
  show() {
    setTimeout(() => {
      this.container.style.transition = "opacity 1s ease";
      this.container.style.opacity = "1";
    }, 500);
  }

  /**
   * 隐藏标题
   */
  hide() {
    this.container.style.transition = "opacity 0.5s ease";
    this.container.style.opacity = "0";
  }

  /**
   * 更新标题内容
   */
  updateContent(title: string, subtitle: string, description?: string, highlightValue?: string) {
    // 淡出效果
    this.container.style.transition = "opacity 0.3s ease";
    this.container.style.opacity = "0";
    
    // 更新内容
    setTimeout(() => {
      if (highlightValue) {
        // 带高亮数值的样式（用于风阻等特殊展示）
        this.container.innerHTML = `
          <h1 class="car-title-main1">${title}</h1>
          <p class="car-title-highlight1">${highlightValue}</p>
          <p class="car-title-sub1">${subtitle}</p>
          <p class="car-title-desc">${description || ""}</p>
        `;
      } else if (description) {
        // 带描述的样式
        this.container.innerHTML = `
          <h1 class="car-title-main2">${title}</h1>
          <p class="car-title-sub">${subtitle}</p>
          <p class="car-title-desc">${description}</p>
        `;
      } else {
        // 普通样式
        this.container.innerHTML = `
          <h1 class="car-title-main">${title}</h1>
          <p class="car-title-sub">${subtitle}</p>
        `;
      }
      
      // 淡入效果
      this.container.style.opacity = "1";
    }, 300);
  }

  /**
   * 恢复默认内容
   */
  resetContent() {
    this.updateContent("xiaomi su7", "C级高性能 生态科技轿车");
  }

  /**
   * 销毁组件
   */
  destroy() {
    this.container.remove();
  }
}
